<template>
  <div>
    <span v-if="!editable">{{orgName}}</span>
    <el-select :disabled="disabled" v-if="editable" v-model="orgValue" :placeholder="placeholder" @change="selectOption"
               filterable>
      <el-option
        v-for="item in options"
        :key="item.orgId"
        :label="item.orgName"
        :value="item.orgId">
      </el-option>
    </el-select>
  </div>
</template>

<script>
  export default {
    name: "FtOrg",
    props: {
      placeholder: {
        type: String,
        default: '请选择'
      },
      value: {
        type: [String, Number]
      },
      editable: {
        type: Boolean,
        default: true
      },
      disabled: {
        type: Boolean,
        default: false
      },
    },
    mounted(){
      this.load()
    },
    data() {
      return {
        options: [],
        orgName: null,
        orgValue: null
      }
    },
    methods: {
      load() {
        let params = {
          pageSize: 0,
          pageIndex: 1
        }
        this.$http.post('/joys-rest/joys-master-data/orgs/query', null, {
          params
        }).then(
          resp => {
            this.options = resp.body.rows
          }, resp => {
            this.$message.error(resp.body)
          }
        )
      },
      selectOption() {
        this.$emit('input', this.orgValue)
        this.$emit('change', this.orgValue)
      }
    },
    watch:{
      value(){
        if (this.value) {
          this.$http.get('/joys-rest/joys-master-data/orgs/queryOrgInfo/' + this.value).then(
            resp => {
              this.orgName = resp.body.orgName
            }, resp => {
              this.$message.error(resp.body)
            }
          )
        }
      }
    }
  }
</script>

<style scoped>

</style>
